<template>
  <page-wrap hide-tab stay-still :title="'我的战绩'" back need-login>
    <view class="wrapper">
      <view class="header">
        <view class="card">
          <view class="cardTitle">获得奖励(元)</view>
          <view class="money">
            <view class="moneyLeft">
              {{moneyInfo.amount || 0}}
            </view>
            <view class="moneyRight">
              <u-button shape="circle" @click="handleWithdrawalClick" style="">
                立即提现
              </u-button>
            </view>
          </view>
          <view class="updateTime">
            更新于 {{currentdate}}
          </view>
          <view class="invInfo">
            <view class="invContainer">
              <view class="invTitle">邀请好友数</view>
              <view class="invCount"> {{moneyInfo.inviteSubNum || 0}}</view>
            </view>
            <view class="invContainer">
              <view class="invTitle">好友订单数</view>
              <view class="invCount"> {{moneyInfo.subOrderNum || 0}}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="invPersonList">
        <view class="ListTitle">邀请好友列表</view>
        <view class="invPersonItem">
          <scroll-view  scroll-y @scrolltolower="loadMore">
            <view :class="{'rankingItem':true,'isSelf':index==0}" v-for="(item,index) in moneySubRecord" :key="index">
              <view class="left">
                <view class="personInfo">
                  <view class="avatarContainer">
                    <view class="avatar">
                      <img :src="item.personAvatar" alt="" class="personAvatar">
                    </view>
                  </view>
                  <view class="info">
                    <view class="personName">{{item.personName}}</view>
                    <view class="invCount">{{item.createDate}}</view>
                  </view>
                </view>
              </view>
              <view class="rankCount">{{item.amount}} 元</view>
            </view>
          </scroll-view>

        </view>
      </view>
      <u-loading-page :loading="loading"></u-loading-page>
    </view>
    <u-modal v-model="withdrawalModal" title="提示" confirmText="知道了" @confirm='withdrawalModal=false'>
      <view class="slot-content">
        <view class="toast">
          提示一览小程序暂不支持余额提现，请前往应用商城下载一览职业app，登录并提现
        </view>
      </view>
    </u-modal>
  </page-wrap>
</template>

<script>
import Empty from "@/components/Empty.vue";
import {
  reqGetShareMoneyPage,
  reqGetShareMoneyInfo,
  reqGetShareMoneySubRecord
} from "@/api/modules/report";
export default {
  name: "myScore",
  components: {
    Empty,
  },
  data() {
    return {
      loading: true,
      key: "",
      moneySubRecord: [],
      moneyPage: [],
      moneyInfo: {},
      currentdate: "",
      option: {
        auto: false,
        page: 0,
        noMoreText: "",
        emptyText: '您还没有招募到好友哦，赶紧行动起来，抓紧时间薅羊毛吧！',
        emptyImage: "https://upload.yl1001.com/upload/images/view?file=4OfTf3BRA6yiNIFpeICLZf95XWKoO6VigbriGCezAfOvCn4KGx2nN=Cl98WTe.png"
      },
      withdrawalModal: false,
      personId: "",
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      pageParams: {
        pageNo: 0,
        pageSize: 20,
      },
      loaded: false,
    };
  },
  created() {
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.getInitData();

  },
  methods: {
    handleWithdrawalClick() {
      this.withdrawalModal = true;
    },
    getInitData() {
      const params = {
        moduleType: "OCCUPATION_MODULE_TYPE",
        personId: this.personId,
      };
      this.loading = true;
      this.getNowFormatDate();
      Promise.allSettled([
        reqGetShareMoneySubRecord(params, this.personId),
        reqGetShareMoneyPage(params, this.personId),
        reqGetShareMoneyInfo(params, this.personId),
      ])
        .then((resArr) => {
          const moneySubRecordRes = resArr[0];
          const moneyPage = resArr[1];
          const moneyInfo = resArr[2];
          if ((moneySubRecordRes.status = "fulfilled")) {
            this.moneySubRecord = moneySubRecordRes.value.data;
            this.$refs.list.refreshSuccess({
              list: this.moneySubRecord,
              total: moneySubRecordRes.value.pageparam.sums,
            });
          }
          if ((moneyPage.status = "fulfilled")) {
            this.moneyPage = moneyPage.value.data;
          }
          if ((moneyInfo.status = "fulfilled")) {
            this.moneyInfo = moneyInfo.value.data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    refresh(paging) {
      const params = {
        pageNo: 0,
        pageSize: paging.size,
        personId: this.personId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      reqGetShareMoneySubRecord(params, this.personId)
        .then((res) => {
          this.moneySubRecord = res.data;
          this.$refs.list.refreshSuccess({
            list: this.moneySubRecord,
            total: res.pageparam.sums,
          });
        })
        .catch((e) => {
          this.$refs.list.refreshFail();
        });
    },
    loadMore() {
      this.getData(true);
    },
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        personId: this.personId,
        moduleType: "OCCUPATION_MODULE_TYPE",
      };
      this.moreLoading = "loading";
      reqGetShareMoneySubRecord(params, this.personId)
        .then((res) => {
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.moneySubRecord.push(...res.data);
            } else {
              this.moneySubRecord = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          this.moreLoading = "nomore";
        });
    },
    getNowFormatDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      this.currentdate = currentdate;
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  position: relative;
  width: 750rpx;
  height: 370rpx;
  background: #4223c5;
  margin-bottom: 91rpx;
  .card {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 696rpx;
    height: 377rpx;
    top: 52rpx;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0px 4px 8px 0px #00000019;
    background-image: url($img-base + "/report/myScoreBg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 25rpx;
    padding: 18rpx;
    .cardTitle {
      color: #939393;
      font-family: PingFangSC;
      font-weight: medium;
      font-size: 24rpx;
      line-height: 24rpx;
      letter-spacing: 0px;
      text-align: left;
      margin: 25rpx 0 24rpx 30rpx;
    }
    .money {
      display: flex;
      justify-content: space-between;
      margin: 0 28rpx 18rpx 30rpx;
      .moneyLeft {
        color: #4223c5;
        font-family: DIN;
        font-weight: bold;
        font-size: 68rpx;
        line-height: 68rpx;
        letter-spacing: 0px;
        text-align: left;
      }
      .moneyRight {
        ::v-deep .u-btn--default {
          width: 172rpx;
          height: 70rpx;
          color: #ffffff;
          font-family: PingFang SC;
          font-weight: medium;
          font-size: 26rpx;
          line-height: 24px;
          letter-spacing: 0rpx;
          text-align: left;
          background: linear-gradient(
            90deg,
            #6c2fed 0%,
            #4b49e1 100%
          ) !important;
        }
      }
    }
    .updateTime {
      color: #939393;
      font-family: PingFangSC;
      font-weight: medium;
      font-size: 24rpx;
      line-height: 24rpx;
      letter-spacing: 0rpx;
      text-align: left;
      margin-left: 30rpx;
      margin-bottom: 26rpx;
    }
    .invInfo {
      display: flex;
      width: 660rpx;
      height: 132rpx;
      margin: 0 auto;
      border-radius: 20rpx;
      background: #f8f8fc;
      .invContainer {
        width: 50%;
        padding-top: 25rpx;
        padding-left: 30rpx;
      }
      .invTitle {
        color: #939393;
        font-family: PingFangSC;
        font-weight: medium;
        font-size: 24rpx;
        line-height: 24rpx;
        letter-spacing: 0px;
        text-align: left;
        margin-bottom: 24rpx;
      }
      .invCount {
        color: #222222;
        font-family: DIN;
        font-weight: bold;
        font-size: 40rpx;
        line-height: 40rpx;
        letter-spacing: 0rpx;
        text-align: left;
      }
    }
  }
}
.invPersonList {
  padding: 0 40rpx;
  .ListTitle {
    color: #222222;
    font-family: PingFangSC;
    font-weight: bold;
    font-size: 36rpx;
    line-height: normal;
    letter-spacing: 0rpx;
    text-align: left;
  }
  .rankingItem {
    width: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: auto;
    height: 157rpx;
    font-family: DIN Alternate;
    font-size: 28rpx;
    line-height: normal;
    color: #222;
    letter-spacing: 0rpx;
    text-align: left;
    // padding-left: 23rpx;
    // padding-right: 31rpx;
    .left {
      display: flex;
      .rankNum {
        display: flex;
        align-items: center;
        width: auto;
        margin-right: 25rpx;
        .rankImg {
          width: 42rpx;
          height: 28rpx;
        }
      }
      .personInfo {
        display: flex;
        width: auto;
        .avatarContainer {
          width: 100rpx;
          height: 100rpx;
          margin-right: 24rpx;
          border-radius: 50%;
          .personAvatar {
            width: 96rpx;
            height: 96rpx;
            border-radius: 50%;
          }
        }
        .info {
          display: flex;
          flex-direction: column;
          // justify-content: center;
          flex-wrap: wrap;
          width: auto;
          .personName {
            margin-top: 13rpx;
            width: auto;
            font-weight: bold;
            font-family: PingFangSC, sans-serif;
            margin-bottom: 2rpx;
            color: #222222;
            font-size: 28rpx;
            line-height: normal;
            letter-spacing: 0px;
            text-align: left;
          }
          .invCount {
            width: auto;
            opacity: 0.5;
            color: #222;
            font-family: PingFangSC, sans-serif;
            font-weight: regular;
            font-size: 26rpx;
            line-height: normal;
            letter-spacing: 0px;
            text-align: left;
          }
        }
      }
    }

    .rankCount {
      width: auto;
      font-weight: bold;
      color: #e9a600;
      font-family: DIN Alternate;
      font-size: 34rpx;
      line-height: normal;
      letter-spacing: 0px;
      text-align: left;
    }
  }
}
.toast {
  font-size: 28rpx;
  color: #222;
  padding: 28rpx 48rpx 28rpx 48rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
}
::v-deep .u-modal__title {
  color: #222;
}
::v-deep
  .scroll-list-wrap
  .scroll-view
  .scroll-content
  .empty-wrap
  .empty-view
  .empty-text {
  width: 400rpx;
}
</style>